<template>
	<view class="zone">
		<Header title=" " color="#fff"></Header>

		<view class="playbox" >
			<view class="content">
				<image class="yb" src="http://img.cpgm.cc/panda/static/mask/tishen.png" mode="widthFix" />
				<image class="guang" src="http://img.cpgm.cc/panda/static/mask/guang.png" mode="widthFix" />

				<view class="flexbw">
					<p>请选择提升道具</p>
					<p>我的战力 <text>{{userinfo.fighting}}</text></p>
				</view>
					<view class="danyao">

						<view class="item"  v-for="(item,index) in list" @click="xuanze(item,index)" :key="index">
							<view class="imgbox" :class="[num==index+1?'active':'']">
								<image :src="item.img?imgurl+item.img:`http://img.cpgm.cc/panda/static/daoju/${index+1}.png`"
									class="wupin" mode="widthFix"></image>
							</view>
							<view class="word">
								<text>{{item.name}}× {{item.num}}</text>
								<text>+{{item.fighting}}战力</text>
							</view>
						</view>

						<!-- <view class="dan_Son" v-for="(item,index) in list" @click="xuanze(item,index)" :key="index">
							<view class="dan_Son_1">
								<image v-show="num==index+1" src="http://img.cpgm.cc/panda/static/game/xz.png"
									class="duigou" mode="widthFix">
								</image>
								<image :src="item.img?imgurl+item.img:`http://img.cpgm.cc/panda/static/daoju/${index+1}.png`"
									class="wupin" mode="widthFix"></image>
								<view class="nums">
									x{{item.num}}
								</view>
								<view class="num">
									{{Number(item.fighting).toFixed(0)}}
									<text>战力</text>
								</view>
							</view>
						</view> -->
					</view>

					<!-- 下面的按钮 -->
					<view class="btn_tow">
						<view @click="tisheng(0)" class="left button">
							道具提升
						</view>
						<view @click="tisheng(1)" class="right button">
							一键提升
						</view>
					</view>
			</view>
		</view>

		<u-popup mode="bottom" border-radius="56" v-model="show">
			<view class="waiBox">
				<view class="top_ti">
					<view class="duoDetl">
						道具提升
					</view>
					<image src="http://img.cpgm.cc/panda/static/public/close.png" @click="cha3" class="chah"
						mode="widthFix"></image>
				</view>
				<!-- 步进器 -->
				<view class="bujin">
					<image :src="obj.img?obj.img:`http://img.cpgm.cc/panda/static/daoju/${num}.png`" class="bu_img"
						mode="widthFix">
					</image>
					<view class="bu_cen">
						<u-number-box :min="1" :max="max" v-model="value"></u-number-box>
					</view>
					<view @click="zui_big" class="bu_right button">
						最大
					</view>
				</view>
				<!-- /下方文字 -->
				<view class="wenzi">
					使用 <text>{{value}}</text> {{obj.name}}，剩余 <text>{{obj.sheng}}</text>个
				</view>
				<!-- 下方的购买按钮 -->
				<view @click="tsDaoju" class="gou_btn button">
					提升{{obj.zhan}}战力
				</view>
			</view>
		</u-popup>
		
		<!-- 投诉弹出层 -->
		<!-- <u-popup mode="center" border-radius="30" v-model="show2">
			<view class="tanchu">
				<view class="center_prop">
					<view class="text">
						温馨提示
					</view>
				</view>
				<view class="tishi">
					确认使用全部道具提升战力吗？
				</view>
				<view class="btn">
					<view  class="lef_btn button">
						取消
					</view>
					<view  class="rig_btn button">
						确定
					</view>
				</view>
			</view>
		</u-popup> -->



		<u-mask :show="show2">
			<view class="warp">
				<view class="maskbox">
					<h3>温馨提示</h3>
					<view class="content">
						<p>确定使用所有道具提升？</p>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="button" @click="querenTs">确定</u-button>
					</view>
					<p class="cancel" @click="quxiao">取消</p>
				</view>
			</view>
		</u-mask>



			
		<!-- 投诉弹出层 -->
		<!-- <u-mask :show="show3">
			<view class="tanchu2">
				<image src="http://img.cpgm.cc/panda/static/home/bang.png" class="bang" mode="widthFix"></image>
				<view class="rect">恭喜您</view>
				<view class="zhanlis">
					提升战力成功！本次提升
				</view>
				<view class="zhan_num">
					<text>{{fight}}</text>战力
				</view>
				<view class="zong">
					您的总战力：<text>{{userinfo.fighting}}</text>战力
				</view>
				<view class="guanbi button" @click="guanbi">
					关闭
				</view>
			</view>
		</u-mask> -->


		<u-mask :show="show3">
			<view class="warp">
				<view class="maskbox2">
					<image class="topimg" src="http://img.cpgm.cc/panda/static/mask/laba.png" mode="widthFix" />
					<view class="wightbg">
						<p>恭喜您提升战力成功，本次提升</p>
						<h3>{{fight}}战力</h3>
						<view class="mask_btn button" @click="show3 = false">关闭</view>
						<view class="zongp">
							我的总战力<text>{{userinfo.fighting}}</text>
						</view>
					</view>
				</view>
			</view>
		</u-mask>
		

	</view>
</template>

<script>
	import {
		danList
	} from '@/utils/toos.js'
	import config from '@/common/config/index.js'
	export default {
		data() {
			return {
				fight: '',
				imgurl: config.imgurl,
				headerimgurl: config.headerimgurl,
				max: 10,
				value: 1,
				show: false,
				show2: false,
				show3: false,
				num: 0,
				danList: danList,
				list: [],
				userinfo: uni.getStorageSync('userinfo'),
				objDaoju: {},
				obj: {
					name: '',
					num: '',
					sheng: '',
					zhan: '',
					img: ''
				},
				userinfo: uni.getStorageSync('userinfo'),
			}
		},
		onShow() {
			this.initList()
		},
		watch: {
			value(newValue, oldValue) {
				console.log(newValue);
				this.obj.zhan = this.objDaoju.fighting * newValue
			}
		},
		methods: {
			// 获取个人信息
			getUserInfo(){
				this.$getUserInfo.getUserInfo((res)=>{
					this.userinfo = res.data
				})
			},	
			// 点击关闭
			guanbi() {
				this.show3 = false
			},
			// /点击取消
			quxiao() {
				this.show2 = false
			},
			// 点击确认提升
			async querenTs() {
				// 一件提升
				let n = await this.$http.index.upFighting({
					type: 2,
				})
				// if (n.fight == 0) {
				// 	return this.$msg('暂无道具')
				// }
				this.$msg(n.msg)
				if (n.code == 1) {
					this.userInfo()
					// 2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222
					this.fight = n.fight
					this.show2 = false
					this.show3 = true
					this.initList()
				}
			},
			// 点击提升战力
			async tsDaoju() {

				let n = await this.$http.index.upFighting({
					type: 1,
					id: this.objDaoju.id,
					num: this.value
				})
				this.$msg(n.msg)
				if (n.code == 1) {
					this.userInfo()
					// 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
					this.fight = n.fight
					this.show = false
					this.show3 = true
					this.initList()
				}
			},
			tisheng(ind) {
				if (ind == 0) {
					// 单个提升
					if (this.num == 0) return this.$msg('请选择道具')
					this.show = true
				} else if (ind == 1) {
					this.show2 = true

				}
			},
			cha3() {
				this.show = false
			},
			// /^+?[1-9]d*$/
			// 点击选择道具
			xuanze(item, index) {
				if (item.num == 0) return this.$msg('暂无道具')
				this.value = 1
				this.max = item.num
				this.num = index + 1
				this.objDaoju = item
				this.obj.name = item.name
				this.obj.sheng = item.num
				this.obj.num = this.value
				this.obj.zhan = Number(item.fighting).toFixed(0)
				if (item.img) {
					this.obj.img = this.headerimgurl + item.img
				}
				// 这个是最大里面的
			},
			// 点击最大
			zui_big() {
				this.value = this.objDaoju.num
				this.obj.num = this.value
			},
			// 请求
			async initList() {
				let n = await this.$http.index.exchangeList({
					type: 1
				})
				this.list = n.data
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}

	.zone {
		min-height: 100vh;
		background: #000000;
		padding: 5vh 0 0;
	}




	

// 购买弹窗

.playbox {
	width: 100%;
	position: relative;
	left: 0%;
	background: url('http://img.cpgm.cc/panda/static/mask/beij.png');
	background-size: 100% 100%;
	z-index: 2;
	box-sizing: border-box;
	min-height: calc(100vh - 102px);

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30px 15px 15px;

		.yb {
			width: 40%;
			margin-top: -50px;
			z-index: 5;
		}

		.guang {
			width: 100%;
			position: absolute;
			top: -15%;
			left:0;
			z-index: -1;
		}
	}
}




	/deep/ .u-drawer-content-visible {
		max-width: 480px !important;
		margin: 0 auto !important;
	}

	.tanchu2 {
		position: relative;
		width: 90%;
		margin: auto;
		margin-top: 50%;
		// height: 215px;
		background: linear-gradient(180deg, #C7DDDA 0%, #FFFFFF 100%);
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
		border-radius: 19px;
		padding-top: 70px;
		padding-bottom: 15px;

		.guanbi {
			width: 80%;
			margin: 0 auto;
			line-height: 55px;
			text-align: center;
			height: 57px;
			background: linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%);
			border-radius: 5px;
			font-size: 16px;
			font-weight: bold;
			color: #FFFFFF;
			margin: 30px;
		}

		.zong {
			font-size: 14px;
			font-weight: 500;
			color: #696969;
			margin-top: 30px;
			text-align: center;

			text {
				color: #000;
			}
		}

		.zhan_num {
			text-align: center;
			font-size: 17px;
			font-weight: 600;
			color: #696969;
			margin: 15px 0;

			text {
				font-weight: bold;
				color: #000;
			}
		}

		.zhanlis {
			text-align: center;
			font-size: 17px;
			font-weight: 600;
			color: #696969;
		}

		.bang {
			position: absolute;
			top: -100px;
			width: 100%;
		}

		.rect {
			text-align: center;
			font-size: 26px;
			font-weight: 600;
			color: #000000;
			margin-bottom: 15px;
		}


	}

	.cha {
		width: 25px;

		height: 25px;
		margin-top: 40px;
		margin-left: 50%;
		transform: translateX(-50%);
	}

	/deep/ .u-mode-center-box {
		background-color: transparent;
	}

	.center_prop {
		position: relative;
		height: 16px;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 25px;

		.text {
			font-size: 24px;
			font-weight: bold;
			color: #131314;
			margin: 0 16px;
		}

		.xing {
			width: 14px;
			height: 14px;
		}

		.bg_qiu {
			position: absolute;
			width: 35px;
			height: 17px;
			border-radius: 10px;
			z-index: -1;
			left: 50%;
			transform: translateX(-70%);
			background: linear-gradient(180deg, #AEE4FE 0%, #8BFDC1 100%);
		}
	}



	.tanchu {
		position: relative;
		padding: 20px;
		min-width: 310px;
		// height: 215px;
		background: #FFFFFF;
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
		border-radius: 15px;

		.btn {
			width: 100%;
			height: 57px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30px;

			.lef_btn {
				width: 120px;
				height: 50px;
				background: #eaeaea;
				border-radius: 5px;
				font-size: 16px;
				font-family: SourceHanSansCN-Bold, SourceHanSansCN;
				font-weight: bold;
				font-size: 16px;
				font-family: SourceHanSansCN-Bold, SourceHanSansCN;
				font-weight: bold;
				color: #000000;
				text-align: center;
				line-height: 50px;
			}

			.rig_btn {
				width: 120px;
				height: 50px;
				background: linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%);
				border-radius: 5px;
				font-size: 16px;
				font-family: SourceHanSansCN-Bold, SourceHanSansCN;
				font-weight: bold;
				font-size: 16px;
				font-family: SourceHanSansCN-Bold, SourceHanSansCN;
				font-weight: bold;
				color: #fff;
				text-align: center;
				line-height: 50px;
			}
		}

		.tishi {
			text-align: center;
			margin: 10px 0;
			font-size: 15px;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #696969;
		}







		.fuzhi {
			width: 148px;
			height: 39px;
			background: linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%);
			border-radius: 20px;
			font-size: 14px;
			font-weight: bold;
			color: #FFFFFF;
			text-align: center;
			line-height: 39px;
			margin: 0 auto;
			margin-top: 10px;
		}
	}

	.waiBox {
		background: linear-gradient(180deg, #96FCF3 0%, #DAFEFB 64%, #F8FEC6 100%);
		box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
		padding: 25px;

		.gou_btn {
			margin: 0 auto;
			width: 80%;
			height: 55px;
			text-align: center;
			background:url('http://img.cpgm.cc/panda/static/public/btn2.png');
			background-size: 100% 100%;
			font-size: 14px;
			font-weight: bold;
			color: #B73800;
		}

		.wenzi {
			font-size: 12px;
			font-weight: 500;
			color: #343434;
			margin-top: 13px;
			text-align: center;
			margin-bottom: 50px;

			text {
				color: #239D4C;
			}
		}

		.bujin {
			width: 80%;
			height: 45px;
			background-color: #fff;
			border-radius: 23px;
			margin: 0 auto;
			margin-top: 25px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30px;

			.bu_img {
				width: 23px;
				height: 23px;
			}

			.bu_right {
				width: 34px;
				height: 19px;
				background: #9D3A23;
				border-radius: 3px;
				font-size: 9px;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 19px;
				text-align: center;
			}
		}

		.top_ti {
			text-align: center;
			position: relative;
			// height: 50px;
			width: 100%;

			.chah {
				position: absolute;
				width: 25px;
				height: 25px;
				top: 0px;
				right: 0px;
			}

			.duoDetl {
				font-size: 20px;
				font-weight: bold;
				color: #343434;

				text {
					font-size: 12px;
					font-weight: 500;
					color: #343434;
				}
			}

			.qiNum {
				font-size: 11px;
				font-weight: 500;
				color: #343434;
			}
		}
	}

	.btn_tow {
		margin-top: 20px;
		height: 47px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left {
			width: 50%;
			height: 55px;
			background: url('http://img.cpgm.cc/panda/static/public/btn2.png');
			background-size: 100% 100%;
			border-radius: 5px;
			font-size: 14px;
			font-weight: bold;
			color: #9D3A23;
			margin-right: 15px;
		}

		.right {
			width: 50%;
			height: 55px;
			background: url('http://img.cpgm.cc/panda/static/public/btn2.png');
			background-size: 100% 100%;
			font-size: 14px;
			font-weight: bold;
			color: #9D3A23;
		}
	}

	.danyao {
		width: 100%;
		border-radius: 6px;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 10px;



		.item {
			width: 48%;
			background: #FFFFFF;
			border-radius: 9px;
			display: flex;
			align-items: center;
			margin: 5px 0;
			padding: 10px;

			.imgbox {
				width: 35%;
				line-height: 0;
				background: linear-gradient(223deg, #0477FD 0%, #3CB6E7 41%, #3BCAF6 61%, #8A68FC 100%, #8A68FC 100%);
				border-radius: 4px;
				margin-right: 5px;
				image {
					width: 100%;
				}
			}

			.word {
				display: flex;
				flex-direction: column;

				text:nth-child(1) {
					color: #111110;
					font-size: 12px;
					font-weight: 600;
				}
				text:nth-child(2) {
					margin-top: 5px;
					font-size: 11px;
					font-weight: 500;
					color: #fff;
					line-height: 17px;
					background: linear-gradient(180deg, #FF2F00 0%, #FF8758 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}
		}

		.active {
			position: relative;
			width: 100%;
			height: 100%;
		}

		.active::after {
			content: '';
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background: url('http://img.cpgm.cc/panda/static/game/xz.png');
			background-size: 100% 100%;
		}



		.dan_Son {
			width: 50%;
			margin-bottom: 10px;
			display: flex;
			align-items: center;
			justify-content: center;

			.dan_Son_1 {
				position: relative;
				width: 57px;
				height: 57px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				background: linear-gradient(223deg, #0477FD 0%, #3CB6E7 41%, #3BCAF6 61%, #8A68FC 100%, #8A68FC 100%);
				border-radius: 4px;

				.duigou {
					position: absolute !important;
					z-index: 10;
					width: 57px;
					height: 57px;
					top: 0%;
					left: 0;
				}

				.bg {
					position: absolute;
					width: 57px;
					height: 57px;
					top: 0%;
					left: 0;
				}

				.nums {
					position: absolute;
					top: 3%;
					left: 10%;
					display: flex;
					align-items: center;
					justify-content: center;
					zoom: 0.8;
					font-size: 8px;
					font-weight: 500;
					color: #000;


				}

				.num {
					position: absolute;
					bottom: 2px;
					right: 5px;
					display: flex;
					align-items: center;
					justify-content: center;
					zoom: 0.8;
					font-size: 9px;
					font-weight: 500;
					color: #000;

					text {
						margin-top: -2px;
					}
				}

				.wupin {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 38px;
					height: 38px;
				}
			}

		}

	}

	.zhanli {
		width: 50%;
		height: 35px;
		position: absolute;
		top: 13%;
		left: 50%;
		transform: translateX(-50%);
	}

	.renwu {
		height: 28%;
		width: 80%;
		position: absolute;
		top: 18%;
		left: 50%;
		transform: translateX(-50%);
	}

	.mian {
		position: relative;
		height: 100vh;
		width: 100%;
		background: url('http://img.cpgm.cc/panda/static/home/xlbg2.png') no-repeat;
		background-size: 100% 100%;
	}

	/deep/ .u-cell-box {
		width: 30%;
	}

	/deep/.u-dropdown__menu__item__text {
		font-size: 13px !important;
	}

	/deep/ .u-dropdown__menu {
		height: 41px !important;
	}

	/deep/ .u-dropdown__menu__item {
		flex: 1;
		display: flex;
		flex-direction: row;
		justify-content: left;
		align-items: center;
	}

	/deep/ .u-icon-plus {
		width: 20px;
		height: 20px !important;
		border-radius: 10px;
		background-color: transparent;
		border: 2px solid #E6BD97;
	}

	/deep/.u-icon-disabled {
		width: 20px;
		height: 20px !important;
		border-radius: 10px;
		background-color: transparent;
		border: 2px solid #E6BD97;
	}

	/deep/.u-icon-minus {
		width: 20px;
		height: 20px !important;
		border-radius: 10px;
		background-color: transparent;
		border: 2px solid #E6BD97;
	}

	/deep/.u-iconfont {
		font-size: 8px !important;
		font-weight: 700 !important;
		color: #E6BD97;
	}

	/deep/.uicon-arrow-left::before {
		font-size: 20px !important;
		font-weight: 500 !important;
	}

	/deep/.u-iconfont {
		font-size: 20rpx !important;
	}

	/deep/.u-number-input {
		background-color: transparent !important;
	}




.flexbw {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 20px;
	width: 100%;

	p:nth-child(1) {
		color: #343434;
		font-size: 16px;
		font-weight: 600;
	}
	p:nth-child(2) {
		color: #696969;
		font-size: 14px;

		text {
			color: #000;
			font-weight: 600;
			margin-left: 4px;
		}
	}
}


.maskbox {
	background: linear-gradient(180deg, #61FBED 0%, #E4FDFC 31%, #F6FEEB 68%, #F5FEA8 100%);
    box-shadow: inset 5px 5px 45px 0px rgba(255, 255, 255, 0.5), inset -5px -5px 45px 0px rgba(255, 255, 255, 0.5), inset 0px 2px 0px 0px rgba(255, 255, 255, 0.5);
	padding: 15px;
	border-radius: 14px;

	h3 {
		color: #000000;
		font-size: 20px;
		font-weight: 600;
		width: 60%;
		margin: 0 auto;
		text-align: center;
		z-index: 10;
		position: relative;
	}
	h3::after {
		content: '';
		width: 100%;
		height: 30px;
		background: url('http://img.cpgm.cc/panda/static/mask/banner.png');
		background-size: 90% auto;
		background-position: center;
		background-repeat: no-repeat;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}


	.content {
		background: #fff;
		border-radius: 15px;
		margin-top: 20px;
		padding: 15px;

		p {
			text-align: center;
			color: #000000;
			font-size: 18px;
			font-weight: 600;
		}

		.button {
			width: 80%;
			height: 55px;
			background: url('http://img.cpgm.cc/panda/static/public/btn3.png');
			background-size: 100% 100%;
			color: #B73800;
			font-size: 20px;
			margin: 0 auto;
			margin-top: 20px;
			font-weight: 600;
			font-size: 16px;
		}
	}

	.cancel {
		color: rgba(0, 0, 0, 0.5);
		font-size: 14px;
		text-align: center;
		margin-top: 20px;
		font-weight: 600;
	}



}







// 弹窗

.maskbox2 {
	background: linear-gradient(180deg, #61FBED 0%, #E4FDFC 31%, #F6FEEB 68%, #F5FEA8 100%);
	box-shadow: inset 5px 5px 47px 0px rgba(255,255,255,0.5), inset -5px -5px 47px 0px rgba(255,255,255,0.5), inset 0px 2px 0px 0px rgba(255,255,255,0.5);
	padding: 15px;
	min-height: 300px;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;

	.topimg {
		width: 35%;
		margin: 0 auto;
		margin-top: -25%;
	}

	h3 {
		color: #000000;
		font-size: 26px;
	}

	.wightbg {
		width: 100%;
		background: rgba(255, 255, 255, 0.7);
		border-radius: 9px;
		padding: 20px 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 15px;

		p {
			position: relative;
			color: #000000;
			font-size: 20px;
			font-weight: 600;
			z-index: 2;
			padding: 0 10px;
		}

		p::after {
			content: '';
			width: 60%;
			height: 30px;
			background: url('http://img.cpgm.cc/panda/static/mask/banner.png');
			background-size: 100% auto;
			background-position: center;
			background-repeat: no-repeat;
			position: absolute;
			top: 0;
			left: 20%;
			z-index: -1;
		}

		h3 {
			color: #000;
			font-size: 20px;
			margin: 15px 0;
			text-align: center;
			font-weight: 600;
		}

		image {
			width: 30%;
			margin: 10px 0;
		}
		text {
			color: #000000;
			font-size: 20px;
			font-weight: 600;
		}
	}

	.zongp {
		color: #696969;
		font-size: 14px;
		margin-top: 20px;

		text {
			color: #000;
			font-size: 14px;
		}
	}
}

.mask_btn {
	width: 60%;
	height: 58px;
	background: url('http://img.cpgm.cc/panda/static/public/btn2.png');
	background-size: 100% 100%;
	margin: 0 auto;
	margin-top: 30px;
	color: #B73800;
	font-weight: 600;
	font-size: 18px;
}







</style>